{% extends "admin/base.html" %}

{% block content %}
<div class="card">
    <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
        <h2>{{ static_page.name }} - 文件管理</h2>
        <div>
            <button type="button" class="btn btn-danger" id="batch-delete-btn" disabled style="margin-right: 10px;">批量删除</button>
            <a href="/admin/static-pages" class="btn btn-secondary">返回列表</a>
        </div>
    </div>
    <div class="card-body">
        <!-- 文件上传表单 -->
        <div class="card mb-4">
            <div class="card-header">
                上传文件
            </div>
            <div class="card-body">
                <form action="/admin/static-pages/upload/{{ page_id }}" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="files">选择文件</label>
                        <input type="file" class="form-control-file" id="files" name="files" multiple webkitdirectory directory>
                        <small class="form-text text-muted">
                            支持上传任意类型的文件和文件夹（选择时请选择文件夹）
                        </small>
                    </div>
                    <button type="submit" class="btn btn-primary">上传</button>
                </form>
            </div>
        </div>
        
        <!-- 文件列表 -->
        {% if files %}
        <form id="batchDeleteForm">
        <table class="table">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="select-all-checkbox">
                    </th>
                    <th>文件名</th>
                    <th>路径</th>
                    <th>大小</th>
                    <th>访问链接</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for file in files %}
                <tr>
                    <td>
                        <input type="checkbox" name="file_paths" value="{{ file.path }}" class="file-checkbox">
                    </td>
                    <td>{{ file.name }}</td>
                    <td>{{ file.path }}</td>
                    <td>{{ "%.2f KB"|format(file.size/1024) if file.size < 1024*1024 else "%.2f MB"|format(file.size/(1024*1024)) }}</td>
                    <td>
                        <a href="{{ file.url }}" target="_blank" class="btn btn-sm btn-info">查看</a>
                    </td>
                    <td>
                        <button type="button" class="btn btn-sm btn-danger delete-file-btn" 
                                data-id="{{ page_id }}" data-path="{{ file.path }}" data-name="{{ file.name }}">删除</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </form>
        
        <!-- 分页控件 -->
        <div class="pagination-container mt-3 text-right">
            <div class="btn-group d-inline-block">
                {% if current_page == 1 %}
                <button class="btn btn-default btn-sm disabled" disabled>首页</button>
                <button class="btn btn-default btn-sm disabled" disabled>上一页</button>
                {% else %}
                <a href="/admin/static-pages/files/{{ page_id }}?page={{ 1 }}" 
                   class="btn btn-default btn-sm">
                    首页
                </a>
                <a href="/admin/static-pages/files/{{ page_id }}?page={{ current_page - 1 }}" 
                   class="btn btn-default btn-sm">
                    上一页
                </a>
                {% endif %}
                {% for i in range(1, total_pages + 1) %}
                    {% if i == current_page %}
                        <a href="/admin/static-pages/files/{{ page_id }}?page={{ i }}" 
                           class="btn btn-primary btn-sm">{{ i }}</a>
                    {% else %}
                        <a href="/admin/static-pages/files/{{ page_id }}?page={{ i }}" 
                           class="btn btn-default btn-sm">{{ i }}</a>
                    {% endif %}
                {% endfor %}
                {% if current_page == total_pages %}
                <button class="btn btn-default btn-sm disabled" disabled>下一页</button>
                <button class="btn btn-default btn-sm disabled" disabled>末页</button>
                {% else %}
                <a href="/admin/static-pages/files/{{ page_id }}?page={{ current_page + 1 }}" 
                   class="btn btn-default btn-sm">
                    下一页
                </a>
                <a href="/admin/static-pages/files/{{ page_id }}?page={{ total_pages }}" 
                   class="btn btn-default btn-sm">
                    末页
                </a>
                {% endif %}
            </div>
        </div>
        {% else %}
        <div class="alert alert-info">
            该页面还没有上传任何文件
        </div>
        {% endif %}
    </div>
</div>

<!-- 静态页面访问信息 -->
<div class="card mt-4">
    <div class="card-header">
        页面访问信息
    </div>
    <div class="card-body">
        <div class="form-group">
            <label>页面目录：</label>
            <code>{{ static_page.directory }}</code>
        </div>
        <div class="form-group">
            <label>访问地址：</label>
            <a href="/pages/{{ static_page.directory }}" target="_blank">
                {{ request.url.scheme }}://{{ request.url.netloc }}/pages/{{ static_page.directory }}
            </a>
        </div>
        <div class="form-group">
            <label>文件访问基础路径：</label>
            <code>/static/pages/{{ static_page.directory }}/</code>
        </div>
    </div>
</div>

<!-- 引入静态页面文件管理相关脚本 -->
<script>
    // 将模板变量传递给JavaScript
    window.pageId = "{{ page_id }}";
</script>
<script src="/static/js/admin/static-pages-files.js"></script>
{% endblock %}